<template>
  <section class="todoapp">
    <TodoHeader 
    @hgetInp="HgetInp"
    />
    <TodoMain 
    :list="newList"
    @hdel="Hdel"
    @Achange="Hchange"
    @xuan="XU"
    />
    <TodoFooter 
    :list="newList"
    @hShow="Hshow"
    @qiehuan="hqiehuan"
    />
  </section>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoMain  from './components/TodoMain.vue'
export default {
  components:{
    TodoFooter,
    TodoHeader,
    TodoMain
  },
  data (){
    return {
    //     list: [
    //   { id: 1, name: '吃饭', isDone: true },
    //   { id: 2, name: '睡觉', isDone: false },
    //   { id: 3, name: '打豆豆', isDone: true }
    // ],
    list:JSON.parse(localStorage.getItem('list')),
    type:'all'
    }
  },
  methods:{
    Hdel(id){
      console.log(id);
      const index = this.list.findIndex(item =>item.id === id)
      this.list.splice(index,1)
    },
    Hchange(id){
      const obj = this.list.find(item=>item.id === id )
      obj.isDone = !obj.isDone
    },
    HgetInp(InpName){
      this.list.push({
        name:InpName,
        id:Date.now(),
         isDone:false
      })
      console.log(InpName);
    },
    Hshow(){
      // 利用filter方法  
      // 获取没完成的 在覆盖 
       this.list = this.list.filter(item => !item.isDone)
    },
    hqiehuan(Type) {
      this.type=Type
      console.log(Type);
    },
    XU(val){
      this.list.forEach(item =>item.isDone = val)
    }
  },
  computed:{
    newList(){
      if(this.type === 'all') {
       return this.list
      }else if(this.type === 'active') {
        return this.list.filter(item => !item.isDone )
      }else if(this.type === 'completed') {
        return this.list.filter(item =>item.isDone)
      }
    }
  },
  wtach:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem('list',JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style></style>
